
/**
 * JS模拟滚动条
 */

 function SimulateScroll(options) {
	 
	 this.config = {
		 containerCls                :  '.container',                    // 外层容器
		 contentCls                  :  '.cont',                         // 内容区域
		 wrapScrollBarCls            : '.wrap-scroll-bar',               // 当前滚动条的容器
		 scrollBarCls                :  '.scroll-bar',                   // 当前滚动条
		 sMoveDis                    : 100,                              // 鼠标单击击或滚动滚轮时，滚动条单次移动的距离
		 isVertical                  : false,                            // 是否是垂直滚动条 默认是横向滚动条
		 isHiddenScroll              : false                              // 默认情况下是否隐藏滚动条 鼠标移上去显示 默认为显示

	 };

	 this.cache = {
		diX       :  0,
		diY       : 0
	 };
	 this.init(options);
 }
 
 SimulateScroll.prototype = {
	init: function(options) {

		this.config = $.extend(this.config,options || {});

		var self = this,
			_config = self.config,
			_cache = self.cache;

		/*
		 * 判断是否是垂直或者横向滚动条
		 * 分别对横向滚动条或者垂直滚动条初始化宽度或者高度
		 */
		if(!_config.isVertical) {
			
			$(_config.containerCls).each(function(index,item) {

				var containerWidth = $(item).width(),
					contentWidth = $(_config.contentCls,item).width();

				// 设置滚动条按钮的宽度 （容器的宽度 * 容器的宽度 / 内容的宽度）
				$(_config.scrollBarCls,item).width(containerWidth * containerWidth /contentWidth);
				var scrollBarWidth = $(_config.scrollBarCls,item).width();

				// 拖动滚动条事件
				self._dragScroll();

				// 滚动条单击事件
				self._clickScroll();
				
				// 鼠标滚轮事件
				self._initMouseWheel(item);
			});
			
			
		}else {
			$(_config.containerCls).each(function(index,item) {
				var containerHeight = $(item).height(),
					contentHeight = $(_config.contentCls,item).height();
				
				// 设置滚动条按钮的高度 (容器的高度 × 容器的高度 / 内容的高度)
				$(_config.scrollBarCls,item).height(containerHeight * containerHeight /contentHeight);
				var scrollBarHeight = $(_config.scrollBarCls,item).height();
				
				// 拖动滚动条事件
				self._dragScroll();

				// 滚动条单击事件
				self._clickScroll();
				
				// 鼠标滚轮事件
				self._initMouseWheel(item);
			});
		}
        
		// 是否隐藏滚动条
		if(_config.isHiddenScroll) {
			$(_config.wrapScrollBarCls).each(function(index,item){
				!$(item).hasClass('hidden') && $(item).addClass('hidden');
			});
			$(_config.containerCls).each(function(index,item){
				$(item).hover(function(){
					$(_config.wrapScrollBarCls,item).hasClass("hidden") && 
					$(_config.wrapScrollBarCls,item).removeClass('hidden');
				},function(){
					!$(_config.wrapScrollBarCls,item).hasClass("hidden") && 
					$(_config.wrapScrollBarCls,item).addClass('hidden');
				})
			});
		}
	},
	
	/**
	 * 拖动滚动条
	 */
	_dragScroll: function() {
		var self = this,
			_config = self.config,
			_cache = self.cache;
		/**
		 * 判断是否是垂直或者横向滚动条
		 */
		if(!_config.isVertical) {
			$(_config.scrollBarCls).mousedown(function(e){
				_cache.diX = e.pageX - $(this).position().left;
				
				if(this.setCapture) {
					$(this).mousemove(function(event) {
						var tagParent = $(event.target).closest(_config.containerCls);
						self._fnChangePos(event.pageX - _cache.diX,tagParent);
					});
					this.setCapture();  //设置捕获范围

					$(this).mouseup(function() {
						$(this).unbind('mousemove mouseup');
						this.releaseCapture(); //取消捕获范围
					});
				}else {
					 $(document).mousemove(function(event) {
						var tagParent = $(event.target).closest(_config.containerCls);
						self._fnChangePos(event.pageX - _cache.diX,tagParent);
					 });
					$(document).mouseup(function(){
						$(document).unbind('mousemove mouseup');
					});
				}
				return false;
			});

		}else {
			$(_config.scrollBarCls).mousedown(function(e){
				_cache.diY = e.pageY - $(this).position().top;
				if(this.setCapture) {
					$(this).mousemove(function(event){
						var tagParent = $(event.target).closest(_config.containerCls);
						self._fnChangePos(event.pageY - _cache.diY,tagParent);
					});
					this.setCapture();  //设置捕获范围

					$(this).mouseup(function() {
						$(this).unbind('mousemove mouseup');
						this.releaseCapture(); //取消捕获范围
					});
				}else {
					$(document).mousemove(function(event) {
						var tagParent = $(event.target).closest(_config.containerCls);
						self._fnChangePos(event.pageY - _cache.diY,tagParent);
					 });
					$(document).mouseup(function(){
						$(document).unbind('mousemove mouseup');
					});
				}
				return false;
			});
		}
	},
	/**
	 * 内容移动距离
	 * @param xy {string} 移动的距离
	 * @param tagParent {object} 父节点
	 * 移动距离的方法 (内容的宽度 - 容器的宽度) * 移动的距离 / (容器的宽度 - 滚动条的宽度)
	 */
	_fnChangePos: function(xy,tagParent) {
		var self = this,
			_config = self.config;
		/**
		 * 判断是否是垂直或者横向滚动条
		 */
		if(!_config.isVertical) {
			if(xy < 0) {
				xy = 0;
			}else if(xy > $(tagParent).width() - $(_config.scrollBarCls,tagParent).width()) {

				xy = $(tagParent).width() - $(_config.scrollBarCls,tagParent).width();
			}
			$(_config.scrollBarCls,tagParent).css('left',xy);
			var left = ($(_config.contentCls,tagParent).width() - $(tagParent).width()) * xy /($(tagParent).width() - $(_config.scrollBarCls,tagParent).width());
			$(_config.contentCls,tagParent).css({'left':-left});
		}else {
			if(xy < 0) {
				xy = 0;
			}else if(xy > $(tagParent).height() - $(_config.scrollBarCls,tagParent).height()) {

				xy = $(tagParent).height() - $(_config.scrollBarCls,tagParent).height();
			}
			$(_config.scrollBarCls,tagParent).css('top',xy);
			var top = ($(_config.contentCls,tagParent).height() - $(tagParent).height()) * xy /($(tagParent).height() - $(_config.scrollBarCls,tagParent).height());
			$(_config.contentCls,tagParent).css({'top':-top});
		}
		
	},
	/**
	 * 滚动条单击事件
	 */
	_clickScroll: function() {
		var self = this,
			_config = self.config,
			_cache = self.cache;

		$(_config.wrapScrollBarCls).mousedown(function(e){
			/**
			 * 判断是否是垂直或者横向滚动条
			 */
			if(!_config.isVertical) {
				var tagParent = $(e.target).closest(_config.containerCls),
					relDisX = e.pageX - $(this,tagParent).offset().left;
			
				/**
				 *  relDisX = 鼠标相对于文档的左边缘的位置（左边）- 目标左侧相对于文档的位置
				 *  $(_config.scrollBarCls,tagParent).position().left  指元素相对于父元素的偏移位置
				 *  $(_config.scrollBarCls,tagParent).width() 当前滚动条的宽度
				 */

				if (relDisX > ($(_config.scrollBarCls,tagParent).position().left + $(_config.scrollBarCls,tagParent).width())) {
					if(_config.sMoveDis <= relDisX) {
						self._fnChangePos($(_config.scrollBarCls,tagParent).position().left + _config.sMoveDis,tagParent);
					}else {
						//console.log('滚动条单次移动的距离过大 请设置小点');
						self._fnChangePos($(_config.scrollBarCls,tagParent).position().left + relDisX,tagParent);
					}

				} else if (relDisX < $(_config.scrollBarCls,tagParent).position().left) {
					self._fnChangePos($(_config.scrollBarCls,tagParent).position().left - _config.sMoveDis,tagParent);
				};
			}else {
				var tagParent = $(e.target).closest(_config.containerCls),
					relDisY = e.pageY - $(this,tagParent).offset().top;
			
				/**
				 *  relDisX = 鼠标相对于文档的左边缘的位置（左边）- 目标左侧相对于文档的位置
				 *  $(_config.scrollBarCls,tagParent).position().left  指元素相对于父元素的偏移位置
				 *  $(_config.scrollBarCls,tagParent).width() 当前滚动条的宽度
				 */

				if (relDisY > ($(_config.scrollBarCls,tagParent).position().top + $(_config.scrollBarCls,tagParent).height())) {
					if(_config.sMoveDis <= relDisY) {
						self._fnChangePos($(_config.scrollBarCls,tagParent).position().top + _config.sMoveDis,tagParent);
					}else {
						//console.log('滚动条单次移动的距离过大 请设置小点');
						self._fnChangePos($(_config.scrollBarCls,tagParent).position().top + relDisY,tagParent);
					}

				} else if (relDisY < $(_config.scrollBarCls,tagParent).position().top) {
					self._fnChangePos($(_config.scrollBarCls,tagParent).position().top - _config.sMoveDis,tagParent);
				};
			}
			
		});
	},
	/**
	 * 鼠标滚轮事件
	 */
	_initMouseWheel: function(container) {
		var self = this,
			_config = self.config,
			_cache = self.cache;
		
		var wheelEvent = self._addEvent();
		wheelEvent(container,'mousewheel',function(event){
			var wheelDelta = event.delta;
			if(wheelDelta < 0){

				if(!_config.isVertical) {

					//滚轮向下滚动
					self._fnChangePos($(_config.scrollBarCls,container).position().left + _config.sMoveDis,container);
				}else {

					//滚轮向下滚动
					self._fnChangePos($(_config.scrollBarCls,container).position().top + _config.sMoveDis,container);
				}
				
			}else {

				if(!_config.isVertical) {
					//向上滚动
					self._fnChangePos($(_config.scrollBarCls,container).position().left -  _config.sMoveDis,container);
				}else {
					//向上滚动
					self._fnChangePos($(_config.scrollBarCls,container).position().top -  _config.sMoveDis,container);
				}
			}
		});
	},
	/*
	 * 对游览器滚轮事件作了兼容处理
	 * 通过调用函数 判断 event.delta 是否大于还是小于0 判断是向上滚动还是向下滚动
	 * win7 火狐游览器判断是向下 是通过event.detail这个属性判断 如果是-3的话 那么向下 或者如果是3的话 那么向上
	 * win7 其他游览器是通过event.wheelDelta来判断 如果是-120的话 那么向下 否则120的话 是向上
	 */
	_addEvent: function(){
		var EventProcess = function(event) {
			var type = event.type;
			if(type == 'DOMMouseScroll' || type == 'mousewheel') {
				 event.delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0) / 3;
			}
			if (event.srcElement && !event.target) {
                event.target = event.srcElement;    
            }
            if (!event.preventDefault && event.returnValue !== undefined) {
                event.preventDefault = function() {
                    event.returnValue = false;
                };
            }
			return event;
		}
		if(window.addEventListener) {
			return function(el,type,fn,capture) {
				if (type === "mousewheel" && document.mozHidden !== undefined) {
                    type = "DOMMouseScroll";
                }
                el.addEventListener(type, function(event) {
                    fn.call(this, EventProcess(event));
                }, capture || false);
			}
		}else if (window.attachEvent) {
            return function(el, type, fn, capture) {
                el.attachEvent("on" + type, function(event) {
                    event = event || window.event;
                    fn.call(el, EventProcess(event));    
                });
            }
        }   
	}
 };

 // 代码初始化
 $(function(){
	 //计算宽度
	 var i = $(".change_prod.cont li").length;
	 $(".change_prod.cont").width(i*100);
	 new SimulateScroll({});
	 if($(".scroll-bar").width()==$(".wrap-scroll-bar").width()){
		 $(".wrap-scroll-bar").hide();
		 $(".container").height("35px");
	 }
 });
